<script setup lang="ts">
import CustomMessage from '@/components/CustomMessage/index.vue';
import { ref } from 'vue';

const message = ref();

// 用户数据（注意：gender使用字符串类型与radio value匹配）
const userInfo = ref({
  avatar: '/static/images/avatar.jpg',
  nickname: '科技探索者',
  username: 'user@example.com',
  gender: '1', // 保持字符串类型与radio value一致
  birthday: '1995-06-15',
  bio: '热爱前端技术的开发者',
  region: ['北京市', '朝阳区'],
});

// 保存信息
function saveInfo() {
  uni.showLoading({ title: '保存中...' });
  setTimeout(() => {
    uni.hideLoading();
    message.value.show({
      type: 'success',
      title: '个人信息已更新',
      duration: 1500,
    });
  }, 1000);
}
</script>

<template>
  <view class="min-h-screen bg-gray-50 pb-[env(safe-area-inset-bottom)]">
    <!-- 顶部标题栏 -->
    <view class="bg-gradient-to-r from-blue-600 to-cyan-500 px-6 py-4 rounded-b-lg shadow">
      <view class="flex items-center">
        <uni-icons
          type="arrowleft"
          size="24"
          color="white"
          @click="uni.navigateBack()"
        />
        <text class="text-xl font-bold text-white ml-2">
          个人资料
        </text>
      </view>
    </view>

    <!-- 内容区域（包含保存按钮） -->
    <scroll-view scroll-y class="h-[calc(100vh-7.5rem)] px-4">
      <!-- 头像上传 -->
      <view class="flex flex-col items-center py-6">
        <image
          :src="userInfo.avatar"
          class="w-20 h-20 rounded-full border-2 border-white shadow-md mb-3"
          mode="aspectFill"
        />
        <text class="text-blue-500 text-sm">
          点击修改头像
        </text>
      </view>

      <!-- 表单卡片 -->
      <view class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden">
        <!-- 基本信息 -->
        <view class="px-4 py-3 border-b border-gray-100">
          <text class="font-medium text-gray-800">
            基本信息
          </text>
        </view>

        <view class="divide-y divide-gray-100">
          <!-- 昵称 -->
          <view class="px-4 py-3 flex items-center justify-between">
            <view class="flex-1">
              <text class="block text-sm text-gray-500 mb-1">
                昵称
              </text>
              <input
                v-model="userInfo.nickname"
                class="w-full text-gray-800 placeholder-gray-300"
                placeholder="请输入昵称"
              >
            </view>
          </view>

          <!-- 用户名 -->
          <view class="px-4 py-3">
            <text class="block text-sm text-gray-500 mb-1">
              用户名
            </text>
            <text class="text-gray-800">
              {{ userInfo.username }}
            </text>
          </view>

          <!-- 性别选择 -->
          <view class="px-4 py-3">
            <text class="block text-sm text-gray-500 mb-2">
              性别
            </text>
            <radio-group :value="userInfo.gender" class="flex">
              <!-- 注意：value也使用字符串类型 -->
              <label class="flex items-center mr-6">
                <radio value="1" color="#3b82f6" :checked="userInfo.gender === '1'" />
                <text class="text-gray-800 ml-2">男</text>
              </label>
              <label class="flex items-center">
                <radio value="2" color="#3b82f6" :checked="userInfo.gender === '2'" />
                <text class="text-gray-800 ml-2">女</text>
              </label>
            </radio-group>
          </view>
        </view>
      </view>

      <!-- 详细信息卡片 -->
      <view class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden">
        <view class="px-4 py-3 border-b border-gray-100">
          <text class="font-medium text-gray-800">
            详细资料
          </text>
        </view>

        <view class="divide-y divide-gray-100">
          <!-- 生日 -->
          <picker mode="date" :value="userInfo.birthday" @change="e => userInfo.birthday = e.detail.value">
            <view class="px-4 py-3 flex justify-between items-center">
              <view>
                <text class="block text-sm text-gray-500 mb-1">
                  生日
                </text>
                <text class="text-gray-800">
                  {{ userInfo.birthday }}
                </text>
              </view>
              <uni-icons type="right" size="16" color="#9ca3af" />
            </view>
          </picker>

          <!-- 地区 -->
          <picker mode="region" :value="userInfo.region" @change="e => userInfo.region = e.detail.value">
            <view class="px-4 py-3 flex justify-between items-center">
              <view>
                <text class="block text-sm text-gray-500 mb-1">
                  地区
                </text>
                <text class="text-gray-800">
                  {{ userInfo.region.join(' ') }}
                </text>
              </view>
              <uni-icons type="right" size="16" color="#9ca3af" />
            </view>
          </picker>
        </view>
      </view>

      <!-- 个人简介卡片 -->
      <view class="bg-white rounded-xl shadow-sm mb-6 overflow-hidden">
        <view class="px-4 py-3 border-b border-gray-100">
          <text class="font-medium text-gray-800">
            个人简介
          </text>
        </view>
        <view class="px-4 py-3">
          <textarea
            v-model="userInfo.bio"
            class="w-full text-gray-800 placeholder-gray-300 text-sm"
            placeholder="介绍一下自己..."
            auto-height
          />
        </view>
      </view>

      <!-- 保存按钮（非固定定位，随内容滚动） -->
      <view class="mb-6">
        <button
          class="w-full bg-gradient-to-r from-blue-600 to-cyan-500 text-white py-3 rounded-lg font-medium active:opacity-90"
          @click="saveInfo"
        >
          保存修改
        </button>
      </view>
    </scroll-view>

    <CustomMessage ref="message" />
  </view>
</template>

<style>
input,
textarea {
  outline: none;
  caret-color: #3b82f6;
}
</style>
